<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }

        .show {
            display: block;
        }

        div {
            display: none;
        }
    </style>
</head>

<body>

    <button class="active">1</button>
    <button>2</button>
    <button>3</button>

    <div class="show">11</div>
    <div>22</div>
    <div>33</div>

    <script>

        var oBtns = document.querySelectorAll('button');
        var oDivs = document.querySelectorAll('div');

        // // 循环事件绑定
        // for (var i = 0; i < oBtns.length; i++) {

        //     // 给每一个按钮绑定一个自定义属性  qq  值为下标    -- 直接添加在了标签上的
        //     oBtns[i].setAttribute('qq', i);

        //     oBtns[i].onclick = function () {
        //         // alert(1);

        //         for (var j = 0; j < oBtns.length; j++) {
        //             // 清除所有按钮的active
        //             oBtns[j].classList.remove('active');
        //             // 清除所有div的 show
        //             oDivs[j].classList.remove('show');
        //         }

        //         // 给当前按钮添加active
        //         this.classList.add('active');


        //         // 当前对应的div添加show    
        //         // 找到this对应的下标   ----  先把下标存起来 --- 存在标签上
        //         const k = this.getAttribute('qq');
        //         oDivs[k].classList.add('show');
        //     }
        // }



        // 循环事件绑定
        for (var i = 0; i < oBtns.length; i++) {

            // 给每一个对象绑定一个自定义属性  qq  值为下标    -- 把标签看做js对象   
            oBtns[i].index = i;

            oBtns[i].onclick = function () {
                // alert(1);

                for (var j = 0; j < oBtns.length; j++) {
                    // 清除所有按钮的active
                    oBtns[j].classList.remove('active');
                    // 清除所有div的 show
                    oDivs[j].classList.remove('show');
                }

                // 给当前按钮添加active
                this.classList.add('active');


                // 当前对应的div添加show    
                // 找到this对应的下标   ----  先把下标存起来 --- 存在标签上
                const k = this.index;
                oDivs[k].classList.add('show');
            }
        }


    </script>

</body>

</html>